<template>
  <div>
    <el-row>
      <el-col>
        <div id="journeyStep1Chart4" :style="{width: '100%', height: '400px'}"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

  let echarts = require('echarts/lib/echarts')

  export default {
    data() {
      return {
        msg: '',
        isShow: false,
        dts: ''
      }
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('journeyStep1Chart4'));

        var item = ["胸部不适", "发热", "咳嗽", "痰中带血", "不明原因的出血", "各个部位出现肿块"];
        var value = [141, 177, 207, 228, 242, 245,];
        var option = {
          textStyle: {
            color: '#fff',
            fontWeight:'bolder'
          },
          color: ['#f88a4d'],
          // 提示框
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            textStyle: {
              fontSize: 12
            }
          },
          legend: {
            show: false
          },
          grid: {
            left: '4%',
            right: '16%',
            top: '2%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: {
            show: false,
            boundaryGap: [0, 0.2],
          },
          yAxis: {
            type: 'category',
            // 轴线
            axisLine: {
              show: false,
              boundaryGap: true
            },
            // 刻度
            axisTick: {
              show: false,
              alignWithLabel: true,
              boundaryGap: true
            },
            axisLabel: {
              show: true,
              margin: 12,
              textStyle: {
                fontSize: 12,
                color: '#fff'
              },
              formatter: function(name) {
                // 当名称长度超过10,进行回行处理且循环持续, 防止过长
                var result = '';
                for (var i = 0, len = name.length; i < len; i++) {
                  result += name[i];
                  if (i >= 9 && (i % 9 === 0)) {
                    result += '\n';
                  }
                }
                return result;
              }
            },
            data: item
          },

          series: [{
            type: 'bar',
            barCategoryGap: '50%',
            barWidth: 16,
            label: {
              normal: {
                show: true,
                position: 'right',
                // 图示标签显示内容格式化
                formatter: function(item) {
                  return Number(item.value).toFixed(0);
                }
              }
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: '#80b790'
                }, {
                  offset: 1,
                  color: '#c5efa9'
                }], false),
                barBorderRadius: [0, 50, 50, 0],
                shadowColor: 'rgba(0,0,0,0.1)',
                shadowBlur: 3,
                shadowOffsetY: 3
              }
            },
            zlevel: 10,
            data: value
          }]
        };
        myChart.setOption(option);
      }
    }


  }
</script>

<style scoped>

</style>
